<template>
  <div>
    <div>
      <!-- 优惠券名称 -->
      <div class="flex_y_center" style="margin-bottom: 20px">
        <div class="inp_title">
          <span>*</span>
          优惠券名称：
        </div>
        <el-input
          v-model="couponForm.coupon_name"
          placeholder="请输入卡名称"
          style="width: 25%"
        />
      </div>
      <!-- 优惠券类型 -->
      <div class="flex_y_center" style="margin-bottom: 20px">
        <div class="inp_title">
          <span>*</span>
          优惠券类型：
        </div>
        <el-select
          v-model="couponForm.coupon_type"
          clearable
          :disabled="oInpBool"
          placeholder="请选择优惠券类型"
        >
          <el-option label="满减" value="full" />
          <el-option label="折扣" value="discount" />
          <el-option label="商品兑换" value="goods" />
        </el-select>
      </div>
      <!-- 发放数量 -->
      <div class="flex_y_center" style="margin-bottom: 20px">
        <div class="inp_title">
          <span>*</span>
          发放数量：
        </div>
        <el-input
          v-model="couponForm.grant_num"
          :disabled="oInpBool"
          placeholder="请输入发放数量"
          style="width: 25%"
        >
          <template slot="append">张</template>
        </el-input>
      </div>
      <!-- 使用门槛 -->
      <div style="margin-bottom: 20px; display: flex">
        <div class="inp_title">
          <span>*</span>
          使用门槛：
        </div>
        <!-- 使用门槛单选组 -->
        <el-radio-group
          v-model="couponForm.threshold_type"
          class="flex_direction"
          :disabled="oInpBool"
          @change="couponForm.threshold_value = '0'"
        >
          <el-radio label="not">无门槛</el-radio>
          <!-- 满减 -->
          <el-radio
            class="flex_y_center"
            label="order_amount"
            style="margin: 10px 0"
          >
            <div class="flex_y_center">
              订单满
              <el-input
                v-model="couponForm.threshold_value"
                :disabled="
                  couponForm.threshold_type != 'order_amount' || oInpBool
                "
                style="width: 40%; margin: 0 5px"
              >
                <template slot="append">元</template>
              </el-input>
              可用
            </div>
          </el-radio>
          <!-- 满件减 -->
          <el-radio class="flex_y_center" label="order_num">
            订单满
            <el-input-number
              v-model="couponForm.threshold_value"
              controls-position="right"
              :disabled="couponForm.threshold_type != 'order_num' || oInpBool"
              :min="0"
              style="margin: 0 5px"
            />
            件可用
          </el-radio>
        </el-radio-group>
      </div>
      <!-- 使用次数限制 -->
      <div class="flex_y_center" style="margin-bottom: 20px">
        <div class="inp_title">
          <span>*</span>
          使用次数限制：
        </div>
        <el-input
          v-model="couponForm.limit_num"
          :disabled="oInpBool"
          style="width: 25%"
        >
          <template slot="append">次</template>
        </el-input>
      </div>
      <!-- 优惠内容 -->
      <div class="flex_y_center" style="margin-bottom: 20px">
        <div class="inp_title">
          <span>*</span>
          优惠内容：
        </div>
        <div style="margin-right: 5px">减免</div>
        <el-input
          v-model="couponForm.coupon_amount"
          :disabled="oInpBool"
          style="width: 20%; margin-right: 10px"
        >
          <template slot="append">
            {{ couponForm.coupon_type == 'discount' ? '%' : '元' }}
          </template>
        </el-input>
        <div v-show="couponForm.coupon_type == 'discount'">
          注：9折填写9，98折填写9.8，75折填写7.5
        </div>
      </div>
      <!-- 用卷时间 -->
      <div class="flex_y_center" style="margin-bottom: 20px">
        <div class="inp_title">
          <span>*</span>
          用卷时间：
        </div>
        <el-date-picker
          v-model="couponForm.start_at"
          placeholder="选择活动开始日期"
          type="date"
          value-format="yyyy-MM-dd hh:mm"
        />
        <div style="margin: 0 5px">至</div>
        <el-date-picker
          v-model="couponForm.end_at"
          placeholder="选择活动结束日期"
          type="date"
          value-format="yyyy-MM-dd hh:mm"
        />
      </div>
      <!-- 优惠券状态 -->
      <div class="flex_y_center" style="margin-bottom: 20px">
        <div class="inp_title">
          <span>*</span>
          优惠券状态：
        </div>
        <el-radio-group v-model="couponForm.status">
          <el-radio label="Y">有效</el-radio>
          <el-radio label="N">无效</el-radio>
        </el-radio-group>
      </div>
      <!-- 适用商品类型 -->
      <div style="margin-bottom: 20px; display: flex">
        <div class="inp_title">
          <span>*</span>
          适用商品类型：
        </div>
        <el-radio-group
          v-model="couponForm.apply_type"
          class="flex_direction"
          :disabled="oInpBool"
          @change="selectArr = []"
        >
          <el-radio label="all">全部商品</el-radio>
          <el-radio label="available" style="margin: 10px 0">
            指定商品可用
          </el-radio>
          <el-radio label="disabled">指定商品不可用</el-radio>
        </el-radio-group>
      </div>
      <!-- 选择适用商品类型 -->
      <div
        v-if="couponForm.apply_type != '' && couponForm.apply_type != 'all'"
        style="margin-bottom: 20px; display: flex"
      >
        <div class="inp_title">
          <span>*</span>
          选择适用：
        </div>
        <div style="width: 100%">
          <el-button
            :disabled="oInpBool"
            type="primary"
            @click="openGoodsDialog"
          >
            选择适用商品
          </el-button>
          <el-table :data="selectArr" height="150" style="margin-top: 10px">
            <el-table-column label="商品名" prop="goods_name" />
          </el-table>
        </div>
      </div>
      <!-- 关闭，保存按钮 -->
      <div class="flex_between">
        <div></div>
        <div>
          <el-button @click="$emit('send')">取消</el-button>
          <el-button type="primary" @click="addCoupon">保存</el-button>
        </div>
      </div>
      <!-- 内部嵌套选择商品对话框 -->
      <el-dialog append-to-body title="选择商品" :visible.sync="innerVisible">
        <el-table
          :data="goodsList"
          height="200"
          @selection-change="selectGoods"
        >
          <el-table-column type="selection" />
          <el-table-column label="商品名" prop="goods_name" />
          <el-table-column label="规格名" prop="goods_attr_name" />
        </el-table>
        <div slot="footer">
          <el-button type="primary" @click="innerVisible = false">
            确认
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { addCoupon, specifyCoupon } from '@/api/coupon'
  import { getGoodsList } from '@/api/public'

  export default {
    props: {
      oCouponId: {
        type: Number,
        default: 1,
      },
      // 用于当处于编辑时, 规定哪些不可修改
      oInpBool: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        innerVisible: false, // 控制内层选择商品对话框显示隐藏
        goodsList: [], // 存放获取到的商品列表

        selectArr: [], // 选择的商品列表

        couponForm: {
          id: '',
          coupon_name: '', // 优惠券名称
          coupon_type: '', // 优惠券类型 full满减, discount折扣, goods商品兑换
          grant_num: '', // 发放数量
          threshold_type: '', // 使用门槛 订单金额满order_amount 订单件数满order_num 无门槛not
          threshold_value: '', // 门槛值
          coupon_amount: '', // 优惠金额
          start_at: '', // 有效期开始时间
          end_at: '', // 有效期结束
          limit_num: '', // 每人最大领取数量
          status: '', // 优惠券状态 Y有效 N失效
          apply_type: '', // 适用商品类型 all全部商品适用, available指定商品可用, disabled指定商品不可用
          goods: [], // 适用商品数组
        },
      }
    },
    watch: {
      // 监听 oCouponId 改变，获取选中优惠券信息
      oCouponId: {
        immediate: true,
        handler() {
          if (this.oCouponId) {
            this.getEmitCoupon()
          }
        },
      },
      // 监听商品选择，将商品id和商品规格id赋值到对应数组
      selectArr(newValue) {
        this.couponForm.goods = []
        for (let item of newValue) {
          this.couponForm.goods.push({
            goods_id: item.goods_id,
            goods_item_id: item.goods_attr_id || item.goods_item_id,
          })
        }
      },
    },
    methods: {
      // 获取当前选中id值的优惠券详情信息
      getEmitCoupon() {
        const data = {
          id: this.oCouponId,
        }
        specifyCoupon(data).then((res) => {
          // 循环将对应的数据赋值出来
          for (let item in this.couponForm) {
            item == 'goods'
              ? (this.selectArr = res.data.goods)
              : (this.couponForm[item] = res.data[item])
          }
        })
      },
      // 获取商品列表，并打开商品选择对话框
      openGoodsDialog() {
        if (this.goodsList.length == 0) {
          const params = {
            goods_type: 'all',
          }
          getGoodsList(params).then((res) => {
            this.goodsList = res.data
            this.innerVisible = true
          })
        } else {
          this.innerVisible = true
        }
      },
      // 将选中的商品赋值给指定变量数组
      selectGoods(e) {
        this.selectArr = []
        for (let item of e) {
          this.selectArr.push({
            goods_name: item.goods_name + '(' + item.goods_attr_name + ')',
            goods_id: item.goods_id,
            goods_item_id: item.goods_attr_id,
          })
        }
      },
      // 删除选中的商品
      delCrouse(index) {
        this.selectArr.splice(index, 1)
      },
      // 添加优惠券
      addCoupon() {
        // 防止用户重复点击
        if (typeof this.couponForm.goods != 'string') {
          this.couponForm.goods = JSON.stringify(this.couponForm.goods)
        }

        addCoupon(this.couponForm).then(() => {
          this.$emit('send')
        })
      },
    },
  }
</script>

<style scoped>
  .flex_direction {
    display: flex;
    flex-direction: column;
  }
  .flex_between {
    display: flex;
    justify-content: space-between;
  }
  .inp_title {
    width: 25%;
    text-align: right;
  }
  span {
    color: red;
  }
</style>
